<template>
  <transition :name="'sidelip-down'" @after-leave="afterLeave" @after-enter="afterEnter">
    <div
      class="sidelip-warp"
      v-if="state > -99"
      :style="style"
    >
      <div class="view-box-content">
        <div class="sidelip-bar-wrapper">
          <div class="sidelip-bar-info">
            <Button type="default" size="small" icon="ios-undo" @click="hide"></Button>
            <span>{{title}}</span>
          </div>
        </div>
        <div class="sidelip-con">
          <div class="iframe-box" id="iframe-box" style="position: relative;background: #fff">
            <iframe id="iframeWindow" :src="iframeSrc" class="iframe" ref="iframe"></iframe>
            <!-- <iframe src="http://signon.dadp-sit.crcloud.com/static/portal/vue/index.html#/open?linkType=00&appId=__5kOZagYhXGGJo4sWlMj&actionContent=__tM3W6ApKwGVYJv50Z4D&access_token=Bearer 8888" class="iframe" ref="iframe"></iframe> -->
          </div>
          <div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "sidelip",
  components: {},
  props: {
    full: {
      type: Boolean,
      default() {
        return false;
      }
    },
    isNav: {
      type: Boolean,
      default() {
        return true;
      }
    },
    closeHook: {
      type: Function,
      default() {
        return Promise.resolve(true);
      }
    },
    iframeSrc: {
      type: String,
      default() {
        return "";
      }
    },
    fromApp: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      actionId: ['JUMP_FROM_AAA'],
      display: false,
      state: -99,
      actions: [],
      actionState: {},
      title: "",
      style: {},
      width: "",
      height: ""
    };
  },
  computed: {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.state = -1;
    let self = this;
    //每次生成的实例都不同(this不同)，所以使用addEventListener无法解绑
    window.onmessage = function (e) {
      self.handleIframeMessage(e);
    }
  },
  beforeDestroy: function() {},
  destroyed: function() {
    console.log('destroyed...')
    window.removeEventListener('message', this.handleIframeMessage, false);
    this.$emit("Close");
    this.$el.remove();
  },
  methods: {
    hide() {
      this.closeHook().then(
        res => {
          if (res) {
            this.state = -99;
          }
        },
        () => {}
      );
    },
    afterLeave() {
      this.$destroy();
    },
    afterEnter() {
      this.state = 0;
    },
    handleIframeMessage(e) {
      let origin = e.origin // 消息来源
      let data = e.data || {} // 消息数据
      if (data['from_app'] != this.fromApp) {
        return
      }
      if (data.close) {
        this.$emit('Close', true)
      }
    }
  },
  directives: {}
};
</script>
<style lang="less" scoped>
  .sidelip-down-enter-active {
    transform: translate3d(0, 0, 0);
  }
  .sidelip-down-enter {
    transform: translate3d(0, -120%, 0);
  }

  .sidelip-down-leave {
    transform: translate3d(0, 0, 0);
  }

  .sidelip-down-leave-active {
    transform: translate3d(0, -120%, 0);
  }
  .sidelip-warp {
    position: absolute;
    background-color: #fff;
    z-index: 1000;
    transition: all 0.6s cubic-bezier(0.36, 0.66, 0.04, 1);
    height: 100% !important;
    width: 100%;
    left: 0;
    top: 0;
  }
  .view-box-content {
    height: 100%;
  }
  .sidelip-bar-wrapper {
    width: 100%;
    padding: 0px 10px;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    background-color: #f9f9f9;

    .sidelip-bar-buttons {
      position: absolute;
      right: 8px;
      top: 13px;

      button {
        margin-right: 5px;
      }
    }

    .sidelip-bar-info {
      // position: absolute;
      // top: 0;
      line-height: 38px;
      .button {
        border-color: #f1f1f1;
      }
      span {
        font-size: 18px;
        color: #333;
        margin-left: 6px;
        vertical-align: middle;
      }

      i {
        font-size: 18px;
        color: #666;
        cursor: pointer;
      }
    }
  }

  .sidelip-bar-wrapper .sidelip-bar-info .ivu-btn:hover i {
    color: #ff6f4b;
  }
  .sidelip-con {
    height: calc(~"100% - 50px");
    position: relative;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 10px;

    .sidelip-box {
      padding: 30px;
    }

    .sidelip-noInfor {
      .infor-icon {
        font-size: 50px;
        color: #f2f2f2;
      }

      p {
        font-size: 16px;
        margin-bottom: 10px;
      }
    }
  }
  .iframe-box {
    height: 100%;
    .iframe {
      width: 100%;
      height: 100%;
      border: 0;
      overflow: hidden;
      box-sizing: border-box;
    }
  }
</style>
